<template>
  <div style="position: relative">
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="name"
        label="字典名称"
        name="name"
      >
        <a-input
          v-model:value="formState.name"
          placeholder="请输入管理员名称"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="code"
        label="字典编号"
        name="code"
      >
        <a-input v-model:value="formState.code" placeholder="请输入字典编号" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-right: 15px"
        label="字典类型"
        name="type"
      >
        <a-select
          allowClear
          style="width: 100%"
          v-model:value="formState.type"
          placeholder="请选择字典类型"
        >
          <a-select-option
            v-for="item in typeList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="sort"
        label="字典排序"
        name="sort"
      >
        <a-input-number
          placeholder="请输入字典排序"
          style="width: 100%"
          v-model:value="formState.sort"
          :min="1"
          :max="10000"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="sort"
        label="字典图标"
        name="sort"
      >
        <a-upload
          list-type="picture-card"
          v-model:file-list="fileList"
          :before-upload="beforeUpload"
        >
          <div v-if="fileList.length < 1">
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as notificationApi from "@/api/notification.js";
import * as dictionariesApi from "@/api/dictionaries.js";
import { message } from "ant-design-vue";
const typeList = [
  {
    label: "性别",
    value: "gender",
  },
  {
    label: "医废分类",
    value: "waste_classify",
  },
  {
    label: "预警分类",
    value: "warn_classify",
  },
  {
    label: "超重预警符号",
    value: "warn_symbol",
  },
  {
    label: "超重预警单位",
    value: "warn_unit",
  },
  {
    label: "条件",
    value: "warn_weight_condition",
  },
  {
    label: "单位",
    value: "warn_weight_unit",
  },
];

const rules = {
  name: [
    {
      required: true,
      message: "请输入字典名称",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入字典编号",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      message: "请输入字典类型",
      trigger: "blur",
    },
  ],
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      name: "",
      code: "",
      id: "",
      icon: "",
      sort: "",
      type: null,
    });
    const fileList = ref([]);
    const beforeUpload = (file) => {
      fileList.value = [...fileList.value, file];
      console.log(1234);
      return false;
    };
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
        // if (formState.icon) {
        //   dictionariesApi.sysDictionSave(params).then((res) => {
        //     if (res && res.success) {
        //       message.success("操作成功");
        //       resetForm();
        //       emit("finish");
        //     } else {
        //     }
        //   });
        //   return false;
        // }
        if (fileList.value.length > 0) {
          let formData = new FormData();
          formData.append("file", fileList.value[0].originFileObj);
          notificationApi.uploadFile(formData).then((res) => {
            if (res && res.success) {
              console.log(res);
              params.icon = res.data;
                dictionariesApi.sysDictionSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
            }
          });
        }else{
                 params.icon = '';
            dictionariesApi.sysDictionSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
        }
      
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      if (props.handleType == "add") {
        formState.id = "";
        return false;
      }
      formState.name = props.handleRow.name;
      formState.code = props.handleRow.code;
      formState.id = props.handleRow.id;
      formState.sort = props.handleRow.sort;
      formState.type = props.handleRow.type;
      formState.icon = props.handleRow.icon;
      fileList.value = props.handleRow.icon?[{ url: props.handleRow.icon }]:[];
    });

    return {
      formRef,
      handleType,
      typeList,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      fileList,
      beforeUpload,
      resetForm,
    };
  },
});
</script>
<style lang="scss">
</style>